<template>
  <page-layout>
    <crud-container :edit-info.sync="editInfo" :dialog-width="editInfo.editType!='config'?'500px':'80%'"
                    @doCreate="doCreateBefore" @doUpdate="doUpdateBefore">
      <el-form inline slot="header">
        <el-form-item label="字典类型">
          <el-input size="small" v-model="listQuery.key"></el-input>
        </el-form-item>
        <el-form-item>
          <el-form-item>
            <primary-button @click.native="loadList">查询</primary-button>
          </el-form-item>
          <el-form-item>
            <primary-button @click.native="createHandle">新增</primary-button>
          </el-form-item>
        </el-form-item>
      </el-form>
      <table-data :table-data="tableData" operater-width="220px" :columns="columns">
        <template slot="operateButtons" slot-scope="scope">
          <el-link type="primary" @click="editHandle(scope.row)">编辑</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="primary" @click="configHandle(scope.row)">字典配置</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link type="danger" @click="doDelete(scope.row.pkId)">删除</el-link>
        </template>
      </table-data>
      <el-pagination slot="footer" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :page-size="listQuery.pageSize"
                     layout="total, prev, pager, next" :total="total">
      </el-pagination>
      <dict-edit-form v-if="editInfo.editType!='config'" :data-form="temp" slot="dialogBody"
                      ref="editForm"></dict-edit-form>
      <dict-config slot="dialogBody" :type="temp.dictType" v-else></dict-config>
    </crud-container>
  </page-layout>
</template>

<script>
import PageLayout from '@/components/PageLayout'
import CrudContainer from "@/components/CrudContainer";
import BaseExtend from "@/extends/BaseExtend";
import {PrimaryButton} from "@/components/Form"
import TableData from "@/components/TableData/TableData";
import {page, create, update, remove} from '@/api/dictType'
import DictEditForm from "@/views/dict/components/dictEditForm";
import DictConfig from './components/dictConfig'

export default {
  components: {DictEditForm, TableData, PageLayout, CrudContainer, PrimaryButton, DictConfig},
  extends: BaseExtend,
  data() {
    return {
      listQuery: {
        key: ''
      },
      columns: [
        {label: '字典类型', prop: 'dictType'},
        {label: '描述', prop: 'noteDesc'},
        {label: '创建人', prop: 'createdBy'},
        {label: '创建时间', prop: 'createdTime', type: 'date'},
      ]
    }
  },
  computed: {},
  watch: {},
  methods: {
    loadList() {
      page(this.listQuery).then(res => {
        this.tableData = res.result.records
        this.total = res.result.total
      })
    },
    doCreate() {
      create(this.temp).then(res => {
        this.ok(res, '添加', this.saveCbk)
      })
    },
    doUpdate() {
      update(this.temp).then(res => {
        this.ok(res, '修改', this.saveCbk)
      })
    },
    doDelete(id) {
      this.$confirm('确定要删除此用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id).then(res => {
          this.ok(res, '删除', this.loadList)
        })
      }).catch(() => {
      });
    },
    configHandle(row) {
      this.temp = Object.assign({}, row)
      this.editInfo.editType = 'config'
      this.editInfo.editFlag = true
    }
  }
}
</script>

<style scoped>

</style>
